<template>
  <div class="content">
    <div class='crumbs'>
      <el-breadcrumb separator='/'>
        <el-breadcrumb-item>
          <i class='el-icon-lx-c'></i>书籍借阅
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class='container'>
      <div class='handle-box'>
        <el-input v-model='query.name' placeholder='图书名称' class='handle-input mr10'></el-input>
        <el-input v-model='query.userName' placeholder='借阅人' class='handle-input mr10'></el-input>
        <el-button status='primary' class='mr10' @click='handleSearch'>搜索</el-button>
        <el-button status='primary' class='mr10' @click='handleReset'>重置</el-button>
      </div>
      <el-table
          :data='bookList'
          border
          style='width: 100%'
          class='table'
          ref='multipleTable'
          header-cell-class-name='table-header'
      >
        <el-table-column prop='id' label='id' align='center' v-if='false'></el-table-column>
        <el-table-column prop='name' label='图书名称' align='center'></el-table-column>
        <el-table-column prop='borrowTime' label='借阅时间' align='center'></el-table-column>
        <el-table-column prop='returnTime' label='归还时间' align='center'></el-table-column>
        <el-table-column prop='status' label='借阅状态' align='center'>
          <template slot-scope='scope'>
            <el-tag
                :type="scope.row.status=='0'?'success':scope.row.status=='2'?'warning':'info'">
              {{ getStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='userId' label='借阅人' align='center'></el-table-column>
        <el-table-column label='操作' width='230' align='center'>
          <template slot-scope='scope'>
            <el-button
                status='text'
                label='ttb'
                @click='handleBorrow(scope.$index, scope.row)'
            >借阅
            </el-button>
            <el-button
                status='text'
                @click='handleReturn(scope.$index, scope.row)'
            >归还
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class='pagination'>
        <el-pagination
            background
            layout='total, prev, pager, next'
            :current-page='query.current'
            :page-size='query.pageSize'
            :total='total'
            @current-change='handlePageChange'
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {bookListPage, updateBook} from "@/api/book";

export default {
  name: "IndexPage",
  data() {
    return {
      query: {
        current: 1,
        pageSize: 10,
        userName: '',
        name: '',
        sortField: '',
        sortOrder: 'ascend'
      },
      id: '',
      bookList: [],
      userList: [],
      form: {
        id: '',
        name: '',
        borrowTime: '',
        returnTime: '',
        userId: '',
        status: 0,
        isChange: false
      },
      idx: -1,
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      bookListPage(this.query).then(res => {
        this.bookList = res.data.records;
        this.total = res.data.total || 0;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      try {
        this.query.pageSize = 10;
        this.handlePageChange(1);
      } catch (e) {
        this.$message.error('搜索失败');
      }
      this.$message.success('搜索成功');
    },
    handleReset() {
      this.query.userName = ''
      this.query.name = ''
      this.query.sortField = ''
      this.query.pageSize = 10;
      this.handlePageChange(1);
    },
    handleBorrow(index, row) {
      this.idx = index;
      this.form.id = row.id;
      this.form.status = 1;
      updateBook(this.form).then(res => {
        if (res.code == 0) {
          this.$message.success('借阅成功');
          this.getData()
          this.handelClear();
        } else {
          this.$message.error('借阅失败');
        }
      }).catch(e => {
        this.$message.error('借阅失败', e);
      })
    },
    handleReturn(index, row) {
      this.idx = index;
      this.form.id = row.id;
      this.form.status = 2;
      updateBook(this.form).then(res => {
        if (res.code == 0) {
          this.$message.success('归还成功');
          this.getData()
          this.handelClear();
        } else {
          this.$message.error('归还失败');
        }
      }).catch(e => {
        this.$message.error('归还失败', e);
      })

    },
    handelClear() {
      this.form.id = '';
      this.form.status = 0;
    },
    isChange() {
      this.form.isChange = true;
    },
    getStatus(status) {
      if (status == 1) {
        return "已借阅";
      } else if (status == 2) {
        return "已归还";
      } else {
        return "未借阅";
      }
    },
    // 分页导航
    handlePageChange(val) {
      this.query.current = val;
      this.getData();
    }
  }
}
</script>

<style scoped>

.content {
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
  box-sizing: border-box;
}

.handle-box {
  margin-bottom: 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}


.pagination {
  margin: 20px 0;
  text-align: right;
}

.crumbs {
  margin: 10px 0;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>
